@use '@/styles/variables' as *;

.basicInfo,
.cmpInfo {
  position: absolute;
  right: 0;
  margin: 50px 0;

  width: 20%;
  height: 80vh;
  background-color: rgba(29, 32, 55, 0.818);
}

.basicInfo {
  transition: transform 1s;
}

.hide {
  transform: translate(100%);
}

.rightshow {
  transform: translate(0);
}

.leftshow {
  transform: translate(-101%);
}

.basicTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 6vh;
  margin: 7px 10px 7px 3px;

  button {
    display: block;
    margin: 0;
    padding: 0 5px;
    border: none;
  }

  span {
    font-size: 18px;
  }

  .unfold {
    padding-left: 20px;
  }

  .svgSize {
    @include svg-center;
  }

  @include my-a;
}

.showBorder {
  border: 1px solid #eee;
  border-radius: 5px;
}

.cmpTop {
  height: 6vh;
  line-height: 6vh;
  margin: 5px;
  text-align: center;

  @include my-a;
  @include svg-center;
}

.specificInfo {
  padding: 0 20px;

  h3 {
    height: 4vh;
    text-align: center;
    margin-bottom: 7px;
    @include text-hidden;
  }

  li {
    height: 4vh;
    padding: 3px;
    @include text-hidden;
  }
}

.radar {
  margin-top: 10px;

  canvas {
    border: none !important;
  }
}